<template>
  <div>
    <div class="userInfo">
      <div class="title">关于作者</div>
      <div class="info">
        <div class="leftInfo">
          <div class="headImg">
            <el-avatar :size="76" :src="urlImg"></el-avatar>
          </div>
          <div class="name">
            <div class="userName">{{ authorData.name }}</div>
            <div class="department">{{ authorData.position }}</div>
          </div>
        </div>
        <div class="operation">
          <div>
            <div>
              <el-button
                size="small"
                v-if="!isFollow"
                @click="follow"
                class="collectionBtn"
                >关注</el-button
              >
              <el-button
                size="small"
                v-if="isFollow"
                type="info"
                @click="cancelfollow"
                class="collectionBtns"
                >取关</el-button
              >
            </div>
          </div>
          <div>
            <el-button size="small" class="commentBtn" @click="Opendrawer()"
              >私信</el-button
            >
          </div>
        </div>
      </div>

      <el-divider></el-divider>

      <div class="detailBox">
        <div>
          <div class="detailBoxNum">{{ userStauts.articleNum }}</div>
          <div class="detailBoxTitle">发帖</div>
        </div>

        <div>
          <div class="detailBoxNum">{{ userStauts.commenteNum }}</div>
          <div class="detailBoxTitle">评论数</div>
        </div>

        <div>
          <div class="detailBoxNum">{{ userStauts.answerNum }}</div>
          <div class="detailBoxTitle">回答</div>
        </div>
      </div>
    </div>

    <div class="recommendations">
      <div class="recommendationsTitle">热帖推荐</div>
      <div
        class="reItemBox"
        v-for="(item, index) in listData"
        :key="index"
        @click="toDetails(item)"
      >
        <div class="reItemBoxTitle">{{ item.resourcename }}</div>
        <div class="reItemBoxLeft">
          <div class="reItemBoxInfo">
            <div>
              <el-avatar
                :size="30"
                :src="hearImgURL + item.userid.head_portrait"
              ></el-avatar>
            </div>
            <div class="reItemName">{{ item.userid.name }}</div>
          </div>

          <div class="reItemBoxRight">{{ item.reading }} 看过</div>
        </div>
        <el-divider class="divider"></el-divider>
      </div>
    </div>

    <div class="footerBox">
      <div class="footNav">
        <span class="footItm" @click="goToRouter('/home')">首页</span>
        <el-divider direction="vertical"></el-divider>
        <span class="footItm" @click="goToRouter('/workVoting')">工作投票</span>
        <el-divider direction="vertical"></el-divider>
        <span class="footItm" @click="goToRouter('/resourceSharing')"
          >资料共享</span
        >
        <el-divider direction="vertical"></el-divider>
        <span class="footItm" @click="goToRouter('/personalCenter')"
          >个人中心</span
        >
      </div>
      <div class="website">
        <span class="footItm">珠海港官网</span>
      </div>
      <div class="website">
        <span
          >Copyright @2009-2015 珠海股份有限公司版权所有
          粤ICP备2001032号-1</span
        >
      </div>
      <div class="website">
        <span>地址:珠海市情侣路南路278号</span>
      </div>
      <div class="website">
        <span>粤公网安备44049002000443号</span>
      </div>
    </div>

    <div class="xiaoChenXu">
      <div class="erWeiMa"></div>
      <div class="xiaoChenXuTitle">扫描进入小程序</div>
    </div>
    <message ref="child"></message>
  </div>
</template>

<script>
import { get_follow, post_follow, delete_follow } from "../../../api/follow";
import { defaultAvatarURL } from "../../../utils/global";
import { get_resource } from "@/api/resorcefj";
import { getSituation } from "../../../api/getSituation";
import message from "../../../components/message";

export default {
  props: ["authorData", "articleId"],
  data() {
    return {
      urlImg: "",
      hearImgURL: defaultAvatarURL,
      listData: [],
      userStauts: {},
      isFollow: false
    };
  },
  components: {
    message
  },
  watch: {
    authorData() {
      this.urlImg = defaultAvatarURL + this.authorData.head_portrait;
      this.getSituation({
        userid: this.authorData._id
      });
      this.get_followdata();
    },
    articleId() {
      this.getArticle();
    }
  },
  created() {},
  methods: {
    Opendrawer() {
      if (this.authorData._id == this.$store.getters.userInfo._id) {
        this.$message({
          message: "不可以发私信给自己喔~",
          type: "warning"
        });
        return;
      }
      this.$refs.child.open(this.authorData._id);
    },
    async get_followdata() {
      var data = {
        query: {
          userid: this.$store.getters.userInfo._id, //用户id
          followid: this.authorData._id //关注者——id
        }
      };
      var follow = await get_follow(data);
      console.log("是否关注该作者", follow);
      if (follow.data.length !== 0) {
        this.isFollow = true;
      } else {
        this.isFollow = false;
      }
    },
    //关注
    async follow() {
      if (this.$store.getters.userInfo._id == this.authorData._id) {
        this.$message({
          message: "无法关注自己喔~",
          type: "warning"
        });
        return;
      }
      var data = {
        userid: this.$store.getters.userInfo._id, //用户id
        followid: this.authorData._id //关注者——id
      };
      await post_follow(data);
      this.get_followdata();
    },
    //取消关注
    async cancelfollow() {
      var data = {
        query: {
          userid: this.$store.getters.userInfo._id, //用户id
          followid: this.authorData._id //关注者——id
        }
      };
      await delete_follow(data);
      this.get_followdata();
    },
    //获取作者状态
    async getSituation(userId) {
      let stauts = await getSituation(userId);
      console.log("stauts", stauts);
      this.userStauts = stauts.data;
    },
    //路由
    goToRouter(path) {
      this.$router.push(path);
    },
    //热门文章
    async getArticle() {
      console.log(this.articleId);

      let Data = await get_resource({
        query: {
          _id: {
            $ne: this.articleId
          },
          audit: true
        },
        sort: { reading: -1 },
        populate: JSON.stringify([
          {
            path: "userid"
          }
        ]),
        limit: 10
      });
      console.log("热门listData", Data.data);
      this.listData = Data.data;
    },
    toDetails(item) {
      this.$router.push({
        path: "/resourceSharingDetails",
        query: {
          article_id: item._id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.userInfo {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
  .title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .info {
    display: flex;
    justify-content: space-between;
    height: 76px;
    margin-bottom: 15px;
    .leftInfo {
      display: flex;
      .name {
        margin-top: 10px;
        margin-left: 8px;
        .userName {
          font-size: 18px;
          font-weight: 600;
          width: 140px;
          overflow: hidden;
          text-overflow: ellipsis; //超出部分以省略号显示
          white-space: nowrap;
          cursor: pointer;
          &:hover {
            color: #1d2f70;
            text-decoration: underline;
          }
        }
        .department {
          color: #6c6c6c;
          font-size: 15px;
          margin-top: 5px;
          width: 140px;
          overflow: hidden;
          text-overflow: ellipsis; //超出部分以省略号显示
          white-space: nowrap;
        }
      }
    }
    .operation {
      .collectionBtn {
        background: #1d2f70;
        border: #1d2f70;
        color: #fff;
        padding: 9px 25px;
        &:hover {
          background: rgb(53, 89, 180);
        }
      }
      .collectionBtns {
        padding: 9px 25px;
      }
      .commentBtn {
        background: #fff;
        border: #1d2f70 1px solid !important;
        color: #1d2f70 !important;
        margin-top: 5px;
        padding: 9px 25px;
        &:hover {
          background: rgb(237, 238, 240);
        }
      }
    }
  }
  .detailBox {
    display: flex;
    justify-content: space-around;
    text-align: center;
    height: 60px;
    margin-top: -10px;
    .detailBoxNum {
      color: #3257b5;
      font-size: 22px;
      font-weight: 600;
    }
    .detailBoxTitle {
      color: #6c6c6c;
      font-size: 16px;
      font-weight: 530;
      margin-top: 5px;
    }
  }
}

.recommendations {
  background: #fff;
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  .divider {
    margin: 10px 0;
  }
  .recommendationsTitle {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 30px;
  }
  .reItemBox {
    cursor: pointer;
    .reItemBoxTitle {
      font-weight: 600;
      font-size: 17px;
      margin-bottom: 5px;
      width: 100%;
      // min-height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
    }
    .reItemBoxLeft {
      display: flex;
      line-height: 30px;
      font-size: 14px;
      color: #6c6c6c;
      justify-content: space-between;
      .reItemBoxInfo {
        display: flex;
        .reItemName {
          margin-left: 10px;
        }
      }
    }
  }
}

.footerBox {
  min-height: 180px;
  background: #fff;
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  color: #6c6c6c;
  .footNav {
    width: 290px;
    margin: 0 auto;
  }
  .website {
    text-align: center;
    margin-top: 10px;
  }
  .footItm {
    cursor: pointer;
    &:hover {
      color: #1d2f70;
      font-weight: 600;
    }
  }
}

.xiaoChenXu {
  margin-top: 40px;
  .erWeiMa {
    width: 200px;
    height: 180px;
    margin: 0 auto;
    background: url("../../../../public/img/xiaoChenXu/Snipaste_2020-04-17_17-01-33.png");
    background-size: 100% 100%;
  }
  .xiaoChenXuTitle {
    text-align: center;
    margin-top: 15px;
    color: #6c6c6c;
    font-size: 20px;
  }
}
</style>
